<template>
  <l-layout class="l-tab-page" :left="240">
    <template #left>
      <l-panel :title="$t('公司信息')" style="padding-right:0;">
        <el-tree
          :data="lr_companyTree"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleCompanyClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="fa fa-sitemap"></i>
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-layout>
      <template #left>
        <l-panel
          :title="$t('部门信息')"
          style="padding-left:0;padding-right:0;"
        >
          <el-tree
            :data="departmentsTree"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleDepartmentClick"
          >
            <span class="lr-tree-node" slot-scope="{ node }">
              <i class="fa fa-sitemap"></i>
              {{ $t(node.label) }}
            </span>
          </el-tree>
        </l-panel>
      </template>
      <l-select-panel
        ref="selectPanel"
        valueKey="f_UserId"
        :multiple="multiple"
        :columns="columns"
        :loadSelectTable="loadSelectTable"
        @change="handleChange"
        style="padding:8px;padding-left:0;"
        isSaveSelectData
      >
        <template v-slot:f_CompanyId="scope">
          {{
            (
              lr_companyList.find(
                (t) => t.f_CompanyId == scope.row.f_CompanyId
              ) || {}
            ).f_FullName || ""
          }}
        </template>
        <template v-slot:f_DepartmentId="scope">
          {{
            lr_departmentName(
              lr_departments[scope.row.f_CompanyId] || [],
              scope.row.f_DepartmentId
            )
          }}
        </template>
      </l-select-panel>
    </l-layout>
  </l-layout>
</template>
<script>
export default {
  name: "l-user-select-panel",
  props: {
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      companyId: "",
      departmentId: "",
      departmentLoading: false,

      columns: [
        { label: "姓名", prop: "f_RealName", minWidth: "110" },
        { label: "账号", prop: "f_Account", width: "110" },
        { label: "公司", prop: "f_CompanyId", minWidth: "120" },
        { label: "部门", prop: "f_DepartmentId", minWidth: "88" },
      ],
    };
  },
  computed: {
    departmentsTree() {
      return this.lr_departmentTree(this.lr_departments[this.companyId]);
    },
  },
  mounted() {
    this.lr_loadCompanys();
    this.tableLoadData();
  },
  methods: {
    handleCompanyClick(node) {
      this.companyId = node.value;
      this.departmentId = "";
      this.lr_loadDepartments(this.companyId);
      this.tableLoadData();
    },
    handleDepartmentClick(node) {
      this.departmentId = node.value;
      this.tableLoadData();
    },
    tableLoadData() {
      this.$refs.selectPanel.init();
    },
    async loadSelectTable(postData) {
      postData.sidx = "F_CreateDate DESC";
      if (postData.showType == 1) {
        // 全部
        postData.companyId = this.companyId;
        postData.departmentId = this.departmentId;
      }

      const data = await this.lr_getUserPage(postData);
      data.rows.forEach((item) => {
        this.lr_loadDepartments(item.f_CompanyId);
      });
      return data;
    },
    resetForm() {
      this.$refs.selectPanel.reset();
      this.tableLoadData();
    },
    async getForm() {
      let select = await this.$refs.selectPanel.getSelected();
      return select.map((t) => {
        return {
          ...t,
          name: `${this.lr_departmentName(
            this.lr_departments[t.f_CompanyId] || [],
            t.f_DepartmentId
          )}-${t.f_RealName}`,
        };
      });
    },
    async handleChange(value) {
      if (value) {
        if(!this.multiple){
          let select = await this.$refs.selectPanel.getSelected(false);
          this.$emit("change", select[0]);
        }
        this.$emit("change", value);
      } else {
        this.$emit("change", null);
      }
    },
  },
};
</script>
